import { deleteMark, pageMark } from '@/services/api/api-datahub-mark';
import { ModalForm } from '@ant-design/pro-components';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { useAccess } from '@umijs/max';
import { message } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import AddMark from './AddMark';
import DetailsMark from './DetailsMark';
import EditMark from './EditMark';

interface TableMarkProps {
  organization: {};
  onSaveSuccess: () => void;
}
const TableMark: React.FC<TableMarkProps> = ({ organization, onSaveSuccess }) => {
  const [selectedAccountRowKeys, setSelectedAccountRowKeysState] = useState<React.Key[]>([]);

  const userRef = useRef<ActionType>();
  const access = useAccess();

  const columns: ProColumns<DatahubMarkData.MarkPage>[] = [
    {
      title: '名称',
      key: 'name',
      dataIndex: 'name',
      width: '180px',
      render: (_, row, index, action) => <DetailsMark data={row} />,
    },
    {
      title: '描述',
      key: 'describes',
      dataIndex: 'describes',
    },
    {
      title: '触发条件',
      key: 'occurrence',
      dataIndex: 'occurrence',
    },
    {
      title: '操作',
      valueType: 'option',
      width: '120px',
      fixed: 'right',
      render: (_, row, index, action) => [
        <EditMark
          data={row}
          onRefurbish={() => {
            userRef.current?.reload();
          }}
        />,
        <ModalForm
          key={'delete_record_modal_form'}
          title="是否删除"
          trigger={<a key="delete_record_a">删除</a>}
          autoFocusFirstInput
          modalProps={{
            width: 400,
            destroyOnClose: true,
          }}
          onFinish={async (values) => {
            const response = await deleteMark({ id: row.id, organizationId: organization?.key });
            if (response.code === 0) {
              message.success('删除成功！');
              userRef.current?.reload();
              action?.reload();
              return true;
            }
          }}
        >
          该标注将会被删除，是否确定
        </ModalForm>,
      ],
    },
  ];

  useEffect(() => {
    userRef.current?.reloadAndRest();
    console.log(organization, String(organization?.pos).length);
  }, [organization]);

  /**
   * 请求网络
   * @param value
   */
  const request = async (params = {}) => {
    const response = await pageMark({
      ...params,
    });

    return Promise.resolve({
      data: response.data.data,
      total: response.data.total,
      success: response.code === 0,
    });
  };

  return (
    <ProTable<DatahubMarkData.MarkPage>
      columns={columns}
      actionRef={userRef}
      request={request}
      sticky
      rowKey="id"
      tableLayout="fixed"
      dateFormatter="string"
      bordered
      pagination={{
        showQuickJumper: true,
        showSizeChanger: true,
        defaultPageSize: 20,
      }}
      toolBarRender={() => [
        <AddMark
          onRefurbish={function (): void {
            userRef.current?.reloadAndRest();
          }}
        />,
      ]}
    />
  );
};
export default TableMark;
